import getDom from '../tool/getCompoentDom'
import Icon from '@/components/Icon'
import styles from './Message.module.less'
/**
 * 弹出消息框
 * @param {String}content 消息内容
 * @param {String} type 消息类型
 * @param {Number:ms} duration 消失时间(ms)
 * @param {HTMLElement} container 容器,消息会显示在容器的正中间，不传则在页面的正中央,vue中可以设置ref再通过$refs获取相应的元素
 */
export default function (options = {}) {
  const content = options.content || ''
  const type = options.type || 'info'
  const duration = options.duration || 2000
  const container = options.container || document.body
  const div = document.createElement('div')
  const icon = getDom(Icon, { type })
  div.innerHTML = `<span class="${styles.icon}">${icon.outerHTML}</span><div style="font-size:18px" >${content}</div>`
  div.className = `${styles.message} ${styles['message-' + type]}`
  // 将div放进容器当中
  if (getComputedStyle(container).position === 'static') {
    container.style.position = 'relative'
  }
  // 过度后显示
  container.appendChild(div)
  // 一段时间后显示
  setTimeout(() => {
    div.style.opacity = 1
    div.style.transform = 'translateX(-50%) translateY(-50%)'
  }, 100)

  // 一段时间后消失
  setTimeout(() => {
    div.style.opacity = 0
    div.style.transform = 'translateX(-50%) translateY(-150px)'
    div.addEventListener('transitionend', () => {
      div.remove()
      options.callback && options.callback()
    }, { once: true })
  }, duration)
}
